<template>
  <div class="">
    <div id="app" align="center">
      <div id="head">
        <h1>维修项目</h1>
        <div class="left">
          <hr />
          <h2>维修类型</h2>
          <hr />
          <el-row>
            <el-col :span="16">
              <el-tree
                :data="menu"
                :props="defaultProps"
                @node-click="handleNodeClick"
              ></el-tree>
            </el-col>
          </el-row>
        </div>
        <div class="rigth">
          <div id="one">
            <ul style="display: -webkit-flex">
              <li>
                <h2>维修项目</h2>
              </li>
              <li>
                <div id="yc" v-if="zt">
                  <el-button @click="hh()" id="xy" type="warning"
                    >添加项目</el-button
                  >
                </div>
              </li>
            </ul>
            <el-dialog title="添加维修项目" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item
                      label="项目编号"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.serviceitemno"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="项目名称"
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.serviceitemname"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="11">
                    <el-form-item
                      label="收入类型"
                      :label-width="formLabelWidth"
                    >
                      <el-select v-model="value" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.incometypename"
                          :label="item.incometypename"
                          :value="item.incometypeid"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="6">
                    <el-form-item
                      label="标准价："
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.cpricesl"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      label="会员价："
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.vipprice"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                      <el-input
                        v-model="form.siremarks"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">添 加</el-button>
              </div>
            </el-dialog>
          </div>
          <hr />

          <hr />
          <template>
            <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              :data="
                list.filter(
                  (data) =>
                    !search ||
                    data.serviceitemno
                      .toLowerCase()
                      .includes(search.toLowerCase())
                )
              "
              style="width: 100%"
            >
              <el-table-column label="序号">
                <template slot-scope="temp">
                  {{ temp.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="项目编号" prop="serviceitemno">
              </el-table-column>
              <el-table-column label="项目名称" prop="serviceitemname">
              </el-table-column>
              <el-table-column label="收入种类" prop="incometypename">
              </el-table-column>
              <el-table-column label="标准价" prop="cpricesl">
              </el-table-column>
              <el-table-column label="会员价" prop="vipprice">
              </el-table-column>
              <el-table-column label="备注" prop="siremarks"> </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入关键字搜索"
                  />
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-edit"
                    type="success"
                    @click="handleEdit(scope.row.serviceitemid)"
                  ></el-button>
                  <el-dialog
                    title="修改维修项目"
                    :visible.sync="dialogFormVisible2"
                  >
                    <el-form :model="form">
                      <el-row :gutter="10">
                        <el-col :span="12">
                          <el-form-item
                            label="项目编号"
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              v-model="list3.serviceitemno"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item
                            label="项目名称"
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              v-model="list3.serviceitemname"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row :gutter="20">
                        <el-col :span="11">
                          <el-form-item
                            label="收入类型"
                            :label-width="formLabelWidth"
                          >
                            <el-select v-model="value2" placeholder="请选择">
                              <el-option
                                v-for="item in options"
                                :key="item.incometypeid"
                                :label="item.incometypename"
                                :value="item.incometypeid"
                              >
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row :gutter="10">
                        <el-col :span="6">
                          <el-form-item
                            label="标准价："
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              v-model="list3.cpricesl"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item
                            label="会员价："
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              v-model="list3.vipprice"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="9">
                          <el-form-item
                            label="备注："
                            :label-width="formLabelWidth"
                          >
                            <el-input
                              v-model="list3.siremarks"
                              autocomplete="off"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="ss()">取 消</el-button>
                      <el-button type="primary" @click="xiugai()"
                        >确认 修改</el-button
                      >
                    </div>
                  </el-dialog>
                  <el-button
                    size="mini"
                    icon="el-icon-delete-solid"
                    type="danger"
                    @click="handleDelete(scope.row.serviceitemid)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      menu: [],
      loading: false,
      options: [{}],
      list: [],
      list3: [{}],
      id: "",
      value2: "",
      zt: true,
      search: "",
      value: "",
      formLabelWidth: "90px",
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        incometypeid: "",
        serviceitxid: "",
        serviceitemno: "",
        serviceitemname: "",
        siremarks: "",
        cpricesl: "",
        vipprice: "",
      },
      defaultProps: {
        children: "serviceitxes",
        label: "senamex",
      },
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    ss() {
      this.dialogFormVisible2 = false;
    },
    hh() {
      const loading = this.$loading({
        loading: true,
      });
      setTimeout(() => {
        this.dialogFormVisible = true;
        loading.close();
      }, 1000);
      this.form = {
        incometypeid: "",
        serviceitxid: "",
        serviceitemno: "",
        serviceitemname: "",
        siremarks: "",
        cpricesl: "",
        vipprice: "",
      };
      this.value = "";
    },
    add() {
      this.form.incometypeid = this.value;
      this.form.serviceitxid = this.id;
      if (
        this.form.incometypeid == "" ||
        this.form.serviceitemno == "" ||
        this.form.serviceitemname == "" ||
        this.form.siremarks == "" ||
        this.form.cpricesl == "" ||
        this.form.vipprice == ""
      ) {
        alert("请填写完整信息");
        return "";
      }
      this.$http
        .post("http://127.0.0.1:8080/api/pp/add2", this.form)
        .then((resp) => {
          if (resp.data.code == "200") {
            this.ab(this.id);
            const loading = this.$loading({
              loading: true,
            });
            setTimeout(() => {
              alert("新增成功");
              this.form = {
                incometypeid: "",
                serviceitxid: "",
                serviceitemno: "",
                serviceitemname: "",
                siremarks: "",
                cpricesl: "",
                vipprice: "",
              };
              loading.close();
            }, 1000);
          }
        });
      this.dialogFormVisible = false;
    },
    show() {
      let _this = this;
      this.$http.get(`http://localhost:8080/api/pp/show`).then((resp) => {
        let rsdata = resp.data;
        //console.info(rsdata);
        _this.menu = rsdata;
        console.info(_this.menu);
      });
    },
    handleNodeClick(data) {
      let _this = this;
      _this.id = data.serviceitxid;
      _this.tt();
      _this.ab(_this.id);
      console.log(data);
    },
    cha() {
      let _this = this;
      this.$http.get(`http://localhost:8080/api/pp/list2`).then((resp) => {
        let rsdata = resp.data;
        //console.info(rsdata);
        _this.options = rsdata;
        console.info(_this.options);
      });
    },
    ab(id) {
      let _this = this;
      if (id != null) {
        const loading = this.$loading({
          loading: true,
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
        this.$http
          .get(`http://localhost:8080/api/pp/byOne/${id}`)
          .then((resp) => {
            let rsdata = resp.data;
            //console.info(rsdata);
            _this.list = rsdata;
          });
      }
    },
    handleEdit(id) {
      this.dialogFormVisible2 = true;
      this.$http
        .get(`http://localhost:8080/api/pp/list3/${id}`)
        .then((resp) => {
          let rsdata = resp.data;
          //console.info(rsdata);
          this.list3 = rsdata;
          this.value2 = this.list3.incometypename;
        });
    },
    xiugai() {
      let _this = this;
      if (isNaN(this.value2)) {
        this.$http
          .put(
            `http://127.0.0.1:8080/api/pp/update2/${this.list3.serviceitemid}`,
            this.list3
          )
          .then(function (resp) {
            if (resp.data.code == "200") {
              alert("修改品牌成功！");
              _this.dialogFormVisible2 = false;
              _this.ab(_this.id);
            }
          });
      } else {
        this.list3.incometypeid = this.value2;
        this.$http
          .put(
            `http://127.0.0.1:8080/api/pp/update2/${this.list3.serviceitemid}`,
            this.list3
          )
          .then(function (resp) {
            if (resp.data.code == "200") {
              alert("修改品牌成功！");
              _this.dialogFormVisible2 = false;
              _this.ab(_this.id);
            }
          });
      }
    },
    tt() {
      if (this.id == "" || this.id == null) {
        this.zt = false;
      } else {
        this.zt = true;
      }
    },
    handleDelete(id) {
      let _this = this;
      if (window.confirm("是否删除该品牌?")) {
        this.$http
          .delete(`http://127.0.0.1:8080/api/pp/del2/${id}`)
          .then((resp) => {
            if (resp.data.code == "200") {
              _this.ab(_this.id);
              alert("删除成功");
            }
          });
      }
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    this.tt();
    this.show();
    this.cha();
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
#head {
  margin: 5px;
  border: 1px solid black;
  width: 1500px;
}

.left {
  float: left;
  width: 15%;
  height: 600px;
  border: 1px solid black;
}

.rigth {
  border: 1px solid black;
  width: 84%;
  height: 600px;
  float: right;
}

#one {
  width: 300px;
  height: 100px;
}

li {
  display: none;
  display: inline;
}

#xy {
  margin-top: 20px;
}
</style>